<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script type="text/javascript" src="./dist/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="./dist/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="./fontsize/iconfont.css">
	<title></title>
</head>
<style type="text/css">
.container{
	width:1140px;
	padding:0px 15px;
	margin:0 auto;
}
.carousel{
	height:300px;
	overflow:hidden;
	position:relative;
	
}	
.image_reel{
	position:absolute;
}
.image_reel img{
	float:left;
}
.window{
	height:300px;
	width:1140px;

}
.paging{
	position:absolute;
	bottom:20px;
	right:20px;
	display:none;

}
.paging a{
	text-decoration:none;
	color:#fff;
	padding:0px 5px;
}
.paging a:hover{
	background:#920000;
	font-weight:bold;
}
.paging a.active{
	background:#920000;
	font-weight:bold;
}

</style>
<body>
<div class="container">
	<div class="carousel">
		<div class="window">
			<div class="image-reel">
				<a href="#"><img src="power.jpg"></a>
				<a href="#"><img src="power.jpg"></a>
				<a href="#"><img src="power.jpg"></a>
			</div>
		</div>
		<div class="paging">
			<a href="#" rel='1'>1111111</a>
			<a href="#" rel='2'>2222222</a>
			<a href="#" rel='3'>3333333</a>
		</div>	
	</div>
</div>
</body>
<script type="text/javascript">


$('.paging a').click(funtion(){
	$(this).addClass('active');
	$('.paging a').not($(this)).removeClass('active');

});	
$('.paging').show();
$('.paging a:first').addClass('active');
var imageWidth=$('.window').width();
var imageSum=$('.image_reel img').size();
var imageReelWidth=imageWidth*imageSum;

$('.image_reel').css({'width':imageReelWidth});

totate=function(){
	var triggerID=$active.attr('rel')-1;
	var image_reelPosition=triggerID*imageWidth;

	$('.paging a').removeClass('active');
	$active.addClass('active');

	$('.image_reel').animate({
		left:-image_reelPosition
	},500);
};




rotateSwitch=function(){
	play=setInterval(function(){
	$active=$('.paging a.active').next();
	if($active.length===0){
		$active=$('.paging a:first');
	}
	rotate();

},2000);
};

rotateSwitch();


$('.image_reel a').hover(
	function(){
	clearInterval(play);
	},

	function(){
	rotateSwitch();
	}
	);


$('.paging a').click(function(){
	$active=$(this);
	clearInterval(play);
	rotate();
	rotateSwitch();
	return false;
});


</script>
</html>